<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.clo{
				width:300px;
				height: 200px;
				line-height: 200px;
				text-align:center ;
				border-radius: 100px;
				background-color: #ccc;
				font-size: 20px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<em>你好</em>
		<div class="clo" id="clock">00:00:00</div>
	<button id="btn1">开始</button>
	<button id="btn2">停止</button>
	<script>
	
		function retime(){
			var btn1 = document.getElementById('btn1');
			var btn2= document.getElementById('btn2');
			var t;
			btn1.onclick = function(){
				btn1.disabled = 'disabled';
				var date = new Date(),
					hou = date.getHours(),
					min = date.getMinutes(),
					sec = date.getSeconds(),					
					clock = document.getElementById('clock');
					function timer(){
						hou = date.getHours();
						min = date.getMinutes();
						sec = date.getSeconds();
						clock.innerHTML = full0(hou) + ':' + full0(min) + ':' + full0(sec);
						date.setSeconds(++sec);
					}
					timer();
				
				t = setInterval(timer,1000)		
			}
			
			btn2.onclick = function (){
				btn1.disabled = '';
				clearTimeout(t);	
			}
			
			function full0(num){
				if(num<10){
					return '0'+num;
				}return num
			}
		}
		retime();		
		
    </script>
	
	</body>
</html>
